<template>
	<view>
		<view v-for="appunit in appUnits" :key="appunit.unitId">
			<view v-if="appunit.isFinal==1">
				<u-collapse @change="change(appunit.unitId)" :ref="'collapse'+appunit.unitId" :border="false">
					<u-collapse-item :disabled="true" :isLink="false" style="color: #000000;">
						<text slot="title" class="u-page__item__title__slot-title"
							@click="turnPage(appunit)">{{appunit.unitName}}</text>
					</u-collapse-item>
				</u-collapse>
			</view>
			<view v-else>
				<u-collapse @change="change(appunit.unitId)" :ref="'collapse'+appunit.unitId" :border="false">
					<u-collapse-item :title="appunit.unitName">
						<classTree :appUnits="appunit.children"></classTree>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "classTree",
		props: {
			appUnits: {
				type: Array
			}
		},
		data() {
			return {

			};
		},
		methods: {
			change(id) {
				setTimeout(() => {
					this.$emit("initHeight");
				}, 220);
			},
			turnPage(appunit) {
				if (appunit.isVideo == 1) {
					uni.navigateTo({
						url: '/pages/myclass/videoPage?unitData=' + JSON.stringify(appunit) 
					})
				} else {
					uni.navigateTo({
						url: '/pages/myclass/fileview?url=' + appunit.url
					})
				}
			}
		}
	}
</script>

<style scoped>

</style>
